<!-- 联系人页 -->
<template>
	<div style="height: 100%;">
		<!-- 引入公共头部组件 -->
		<HeaderTitle title="联系人" rightTextColor="#1959F9" :rightContent="'新建'"
			@selectRightIconChange="selectRightIconChange" @confirm="search" @cancel="cancel"
			:inputValue="queryParams[0].keyword" placeholder="请输入联系人" :isBack="true" :isSearch="true" />

		<!-- 内容区域 -->
		<div style="width: 100%;">
			<!--联系人列表数据 -->
			<div>
				<div style="padding-bottom: 50px;padding-top: 70px;">
					<div class="boxFormal" v-for="item in RegionList" :key="item.Id" @click="regionClick(item)">
						<div class="companyName" style="font-size:14px">
							{{ item.CustomerName }}
						</div>
						<div class="code flex Jbetween" style="font-size:14px;">
							<div style="padding-right: 30px">姓名:{{ item.Name }}</div>
							<div>电话:{{ item.Tel_Code }}</div>
						</div>

						<div class="companyAddress" style="font-size:14px">
							{{ item.Department}}
						</div>
						<div class="companyAddress" style="font-size:14px">
							{{ item.Address || '暂无地址'}}
						</div>

						<div style="text-align: right;padding-right: 20rpx;">
							<u-button size="mini" @click.stop="recordChangeClick('编辑', item)"
								style="height: 60rpx;margin-left: 25rpx;" type="primary">编辑</u-button>
							<u-button size="mini" @click.stop="recordChangeClick('删除', item)"
								style="height: 60rpx;margin-left: 25rpx;" type="error">删除</u-button>
						</div>
					</div>
				</div>

				<div style="padding-bottom: 20px;">
					<LoadingMore :status="status" :contentText="contentText" :rows="RegionList"></LoadingMore>
				</div>
			</div>
		</div>

		<uni-forms ref="form" :modelValue="entity"
			style="height: 100%;overflow: auto;box-sizing: border-box;display:none">
			<div class="client">
				<u-form-item label="客户名称：" :rules="[{ required: true, message: '请填写客户名' }]" v-model="entity.cCusName">
				</u-form-item>
				<u-form-item label="省:" @click="showcProvince = true" v-model="entity.cProvinceName" readonly>
				</u-form-item>
				<uni-forms-item v-model="showcProvince" position="bottom">
				</uni-forms-item>
				<uni-forms-item label="市:" @click="showcCity = true" v-model="entity.cCityName" readonly>
				</uni-forms-item>
				<uni-forms-item label="区:" @click="showcCounty = true" v-model="entity.cCountyName" readonly>
				</uni-forms-item>
				<uni-forms-item label="行业分类：" v-model="entity.cTrade"> </uni-forms-item>
				<uni-forms-item clickable readonly name="picker" @click="showPicker = true" v-model="entity.SaleType"
					label="销售性质" placeholder="销售性质"></uni-forms-item>

				<uni-forms-item readonly @click="CustomerChoice" right-icon="edit" label="上级单位: " placeholder="选择上级单位"
					v-model="entity.ParentName">
				</uni-forms-item>

				<uni-forms-item clickable readonly name="picker" v-model="entity.cCusTypeName" label="客户类型"
					placeholder="点击选择客户类型">
				</uni-forms-item>
				<uni-forms-item label="营业执照：" v-model="entity.cCusPhone"></uni-forms-item>
				<uni-forms-item label="开票要求：" v-model="entity.IRInfo"></uni-forms-item>
				<uni-forms-item label="地址：" v-model="entity.cCusAddress"></uni-forms-item>
			</div>
			<div style="margin: 16px">
				<u-button round block type="primary" native-type="submit">提交</u-button>
			</div>
		</uni-forms>
	</div>
</template>

<script>
	import {
		GetDataListOfMySelfCustomerInfoByConditions,
		Cust_CustomerLinkManDeleteData
	} from '@/api/interface.js'
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	export default {
		components: {
			// 公共头部组件
			HeaderTitle
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				showcProvince: false,
				showType: false,
				showcCounty: false,
				listChildren: [],
				showcCity: false,
				columnscProvince: [], //省
				columnscCity: [], //市
				columnscCounty: [], //区
				// 备案
				showType: false,
				columnsType: [{
						name: "备案",
						Id: -1
					},
					{
						name: "潜在",
						Id: 0
					},
					{
						name: "正式",
						Id: 1
					},
					{
						name: "休眠",
						Id: 2
					}
				],
				value: "",
				columns: [],
				showPicker: false,
				entity: {
					cCusTypeName: "备案客户"
				},
				info: {},
				RegionList: [], //联系人
				loading: false,
				pagination: {
					current: 1,
					pageSize: 5,
					// 总条数
					Total: 0,
					showTotal: 0
				},
				queryParams: [{
						condition: "Name",
						keyword: ""
					},
					// {
					// 	condition: "cCusType",
					// 	keyword: null
					// }
				],
			};
		},
		onLoad() {
			// 清空数据
			this.RegionList = [];
			// 获取联系人数据
			this.getRegionList();
			//  去除加载状态
			this.loading = false;
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pagination.current = 1
			uni.stopPullDownRefresh();
			this.RegionList = [];
			this.getRegionList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.getRegionList()
		},

		methods: {

			Viewdetails(Id, cCusCode) {
				this.$router.push({
					path: "/formal/Viewdetails",
					query: {
						Id,
						cCusCode
					}
				});
				// this.$refs.viewdetails.openForm(Id, cCusCode);
				// viewdetails
			},
			// 联系人列表点击
			regionClick(item) {
				uni.navigateTo({
					url: "/pages/record/EditRecord?title=查看联系人&Id=" + item.Id
				})
			},
			// 联系人列表编辑和删除
			recordChangeClick(type, item) {

				if (type === '编辑') {
					// 点击的是编辑
					uni.navigateTo({
						url: "/pages/record/EditRecord?title=修改联系人&Id=" + item.Id
					})
				} else {

					this.$utils.showConfirm({
							content: '确定要删除吗',
							confirmText: "删除",
							confirmColor: "#D1100B"
						}).then((res) => {
							if (res.confirm) {
								uni.showLoading({
									title: '删除中'
								})
								Cust_CustomerLinkManDeleteData([
										item.Id
									])
									.then(resJson => {
										if (resJson.Success) {
											this.$sucessToast("已删除");
											setTimeout(function() {
												uni.hideLoading()
											}, 500)
											// 页数初始化
											this.pagination.current = 1;
											this.loading = false;
											//获取联系人列表数据
											this.getRegionList()
										} else {
											this.$errorToast(resJson.Msg);
											this.loading = false;
											setTimeout(function() {
												uni.hideLoading()
											}, 500)
										}
									});
							} else {}
							setTimeout(function() {
								uni.hideLoading()
							}, 500)

						})
						.catch(() => {});
				}
			},

			// 搜索框清除按钮
			cancel() {
				this.queryParams[0].keyword = ""
				// 列表数据清空
				this.RegionList = [];
				// 获取联系人列表数据
				this.getRegionList();
			},
			// 新建联系人
			selectRightIconChange() {
				uni.navigateTo({
					url: "/pages/record/AddRecord"
				})
			},

			//搜索
			search(value) {
				console.log('联系人搜索了', value)
				this.queryParams[0].keyword = value
				// 页数重置
				this.pagination.current = 1;
				// 列表数据清空
				this.RegionList = [];
				this.getRegionList()
			},

			//获取联系人列表数据
			getRegionList() {
				var that = this
				this.status = "loading"
				this.RegionList = []
				this.selectedRowKeys = [];
				GetDataListOfMySelfCustomerInfoByConditions({
						// 当前页数
						PageIndex: this.pagination.current,
						// 每页显示10条
						PageRows: this.pagination.pageSize,
						SortField: "Id",
						SortType: "desc",
						Search: this.queryParams
					})
					.then(resJson => {
						if (resJson.Success) {
							// 赋值总条数
							this.Total = resJson.Total;
							if (resJson.Data == null) {
								this.status = 'noMore'; // 没有更多数据
								return
							}
							if (this.pagination.current == 1) {
								this.RegionList = resJson.Data;
							} else {
								this.RegionList = this.RegionList.concat(resJson.Data);
							}
							this.RegionList.forEach(item => {
								item.SNameList = item.SharerNameList ?
									item.SharerNameList.join("|") :
									"";
							});
							if (this.RegionList.length >= resJson.Total) {
								this.status = 'noMore'; // 没有更多数据
							} else {
								this.status = 'loading'; // 没有更多数据
							}

						} else {
							that.$errorToast(resJson.Msg)
							that.status = 'noMore'; // 没有更多数据
						}

						// 注意，，必须return  否则接口回频繁请求
						return;
					});
			},

			// 备案
			//本条客户的数据
			Client(a) {
				console.log(a);
				this.$set(this.entity, "ParentName", a.cCusName);
				this.$set(this.entity, "ParentId", a.Id);
			},
			//选择客户
			CustomerChoice() {
				this.$nextTick(() => {
					this.$refs.myuser.openForm();
				});
			},
		},
		// // 监听路由
		// watch: {
		// 	$route(a, b) {
		// 		this.onSearch();
		// 	}
		// }
	};
</script>

<style lang="less" scoped>
	/* 覆盖van-button的默认样式 */
	.van-button {
		padding: 0 10px 0 10px !important;
	}

	.search-none {
		// margin-top: -120px !important;
		// 为了解决进到页面后如果是显示检索状态条件下  下拉还会出现数据和检索提示拼接的问题
		height: 0 !important;
	}

	.fixedbox {
		position: fixed;
		bottom: 0;
		right: 0;
		/* height: 50px; */
		background: #fff;
		width: 100vw;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.code {
		margin-left: 10px;
		color: #777;
		padding-right: 20rpx;
	}

	.Foricon {
		color: blue;
		position: absolute;
		right: 8px;
	}

	.btn {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.formalBox {
		// height: calc(100vh - 150px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto;
	}

	.companyName {
		padding-top: 10px;
		margin-left: 10px;
		margin-bottom: 5px;
		color: #000000;
		font-weight: 600;
		font-size: 18px;
		line-height: 1.8;
	}

	.companyAddress {
		padding-top: 10px;
		margin-left: 10px;

		color: #777;
		// font-weight: 600;
		// font-size: 18px;
		line-height: 1.3;
	}

	.boxFormal {
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		// position: relative;

		width: 95%;
		/* height: 80px; */
		padding-bottom: 10px;
		margin: 3px auto;
		margin-bottom: 10px;
	}
</style>